<template>
  <div>
    <Table border :columns="columns" :data="list">
      <template slot-scope="{ row }" slot="is_admin">
        <Tag :color="row.is_admin ? 'success' : 'primary'">{{row.is_admin ? '管理员' : '普通商户'}}</Tag>
      </template>
      <template slot-scope="{ row, index }" slot="action">
        <Button
          type="primary"
          size="small"
          style="margin-right: 5px"
        >编辑</Button
        >
        <Button type="warning" size="small" @click="remove(index)">禁用</Button>
      </template>
    </Table>
  </div>
</template>
<script>
import { mapState, mapActions } from 'vuex'

export default {
  data () {
    return {
      columns: [
        {
          title: '账户名',
          key: 'username'
        },
        {
          title: '是否为管理员',
          slot: 'is_admin',
          width: 150
        },
        {
          title: '提交时间',
          key: 'create_time'
        },
        {
          title: '操作',
          slot: 'action',
          width: 180,
          align: 'center'
        }
      ]
    }
  },
  computed: {
    ...mapState('user', ['list'])
  },
  methods: {
    ...mapActions('user', ['_get_user_list']),
    remove (index) {
      this.data6.splice(index, 1)
    },
    init () {
      this._get_user_list()
    }
  },
  mounted () {
    this.init()
  }
}
</script>
<style lang="scss" scoped>
.table-header {
  position: relative;
  width: 100%;
  text-align: right;
  button {
    margin: 10px;
  }
}
</style>
